<template>
  <div class="main">
    <!-- 走马灯 -->
    <div class="zmd">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in zmdList" :key="item.id">
          <img :src="item.url" height="300px" width="960px" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="article">
      <ArticleList />
    </div>
    <div class="question">
      <Question />
    </div>
    <div class="test">
      <TestList />
    </div>
    <div class="footer">
      <Footer />
    </div>
    <el-backtop :visibility-height="height" :bottom="bottom" />
  </div>

</template>

<script>
import ArticleList from '../article_list/index.vue'
import Question from '../question/index.vue'
import Footer from '../foot/foot.vue'
import TestList from '../paper/index-list/list.vue'
export default {
  name: 'Content',
  components: { ArticleList, Question, Footer, TestList },
  data() {
    return {
      height: 200,
      bottom: 100,
      zmdList: [
        { url: require('@/assets/pic.jpg') },
        { url: require('@/assets/zmd2.jpg') },
        { url: require('@/assets/zmd3.jpg') },
        { url: require('@/assets/zmd4.jpg') }
      ]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.el-carousel__item{
    height: 300px;
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .main {
    background-color: white;
  }
  .question {
      background-color: #f3f4f5;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      padding-bottom: 40px;
  }
  .test {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
  }
</style>
